<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-19 16:28
  PageName：f_practice6_GradientBall.html
  Function：实战案例 - 设计发光的球体
  URL：http://localhost:8080/f_image/f5_practice/f_practice6_GradientBall.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计发光的球体</title>

    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border-radius: 100%;
            margin: 50px auto;
            background-image: -webkit-radial-gradient(8em circle at top, hsla(220, 89%, 100%, 1), hsla(30, 60%, 60%, .9));
            background-image: radial-gradient(8em circle at top, hsla(220, 89%, 100%, 1), hsla(30, 60%, 60%, .9));
        }
    </style>
</head>

<body>
<div></div>
</body>
</html>